<template>
    <div class="general-use">
        <a-modal width="1300px" :visible="visible" title="优惠券使用详情" @cancel="closeModal" class="yuan-modal general-use-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form">
                    <div class="page-left">
                        <div class="page-panel">
                            <div class="form-title">基本信息</div>
                            <div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">优惠券名称：</span>
                                    <span class="coupon-info-words">满50-20优惠券</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">满减规则：</span>
                                    <span class="coupon-info-words">最低消费50元，优惠20元</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">发放方式：</span>
                                    <span class="coupon-info-words">客户主动领取</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">加盟机构营销比例：</span>
                                    <span class="coupon-info-words">20%</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">发放总数：</span>
                                    <span class="coupon-info-words">1000张</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">发起方：</span>
                                    <span class="coupon-info-words">锦弘平台平台</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">核销总数：</span>
                                    <span class="coupon-info-words">150张</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">活动状态：</span>
                                    <span class="coupon-info-words">进行中</span>
                                </div>
                                <div class="coupon-info">
                                    <span class="coupon-info-title">累计满减金额：</span>
                                    <span class="coupon-info-words">200000</span>
                                </div>
                            </div>
                        </div>
                        <div class="page-panel" style="margin-top:15px">
                            <div class="form-title">参与机构明细</div>
                            <div style="display:flex;align-items:center;font-size:14px;margin:10px 0">
                                <span>合计：领取数量</span>
                                <span class="c-success agency-total">200</span>
                                <span>核销数量</span>
                                <span class="c-primary agency-total">100</span>
                                <span>累计满减金额</span>
                                <span class="c-danger agency-total">10000</span>
                            </div>
                            <a-table bordered :rowKey="(item,i)=>item.id" :columns="agencyColumns" :data-source="agencyList"
                                :pagination="agencyPagination">
                            </a-table>
                        </div>
                    </div>
                    <div class="page-right page-panel">
                        <div class="form-title">使用情况</div>
                        <div class="use-total-box">
                            <div class="use-total-list">
                                <div class="use-total-num">1000</div>
                                <div class="use-total-title">发放数量</div>
                            </div>
                            <div class="use-total-list">
                                <div class="use-total-num">1000</div>
                                <div class="use-total-title">已领取</div>
                            </div>
                            <div class="use-total-list">
                                <div class="use-total-num">1000</div>
                                <div class="use-total-title">未领取</div>
                            </div>
                            <div class="use-total-list">
                                <div class="use-total-num">1000</div>
                                <div class="use-total-title">已使用</div>
                            </div>
                            <div class="use-total-list">
                                <div class="use-total-num">1000</div>
                                <div class="use-total-title">未使用</div>
                            </div>
                        </div>
                        <a-table bordered :rowKey="(item,i)=>item.id" :columns="userColumns" :data-source="userList"
                            :pagination="userPagination">
                        </a-table>
                    </div>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import api from "@/api/api";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;
    agencyColumns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "name2",
            key: "name2",
            title: "机构类型",
        },
        {
            align: "center",
            dataIndex: "name1",
            key: "name1",
            title: "自营/加盟",
        },
        {
            align: "center",
            dataIndex: "name4",
            key: "name4",
            title: "领取数量",
        },
        {
            align: "center",
            dataIndex: "name5",
            key: "name6",
            title: "核销数量",
        },
        {
            align: "center",
            dataIndex: "name7",
            key: "name8",
            title: "累计满减金额",
        },
    ];
    agencyList = [{ name: "智慧中医馆" },{ name: "智慧中医馆" },{ name: "智慧中医馆" },{ name: "智慧中医馆" }];
    agencyPagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.agencyPageChange,
    };

    userColumns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "用户名称",
        },
        {
            align: "center",
            dataIndex: "name2",
            key: "name2",
            title: "用户账号",
        },
        {
            align: "center",
            dataIndex: "name1",
            key: "name1",
            title: "使用状态",
        },
        {
            align: "center",
            dataIndex: "name4",
            key: "name4",
            title: "核销医馆",
        },
        {
            align: "center",
            dataIndex: "name5",
            key: "name6",
            title: "使用时间",
        },
    ];
    userList = [{ name: "张三" },{ name: "张三" },{ name: "张三" },{ name: "张三" },{ name: "张三" },{ name: "张三" }];
    userPagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.userPageChange,
    };
    loading = false;
    async mounted() {}

    closeModal() {
        this.$emit("closeModal");
    }

    agencyPageChange() {}
    userPageChange() {}
}
</script>
<style lang="scss">
.general-use-modal {
    .ant-modal-body {
        background-color: rgba(64, 158, 255, 0.1);
        padding: 15px;
    }

    .page-left {
        width: 49.5%;
        display: inline-block;
    }
    .page-right {
        width: 49.5%;
        margin-left: 1%;
        display: inline-block;
        vertical-align: top;
    }
    .page-panel {
        background-color: #fff;
        padding: 0 15px 15px 15px;
        border-radius: 10px;
    }

    .coupon-info {
        display: inline-block;
        width: 50%;
        line-height: 30px;
    }
    .coupon-info-title {
        color: #6d6d6d;
    }
    .coupon-info-words {
        color: #383838;
    }
    .agency-total {
        font-size: 20px;
        font-weight: bold;
        margin-right: 50px;
        margin-left: 5px;
    }
    .use-total-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;
    }
    .use-total-list {
        display: inline-block;
        background-color: rgba(240, 244, 247, 1);
        width: 19%;
        border-radius: 5px;
        text-align: center;
        padding: 10px 0;
    }
    .use-total-num {
        font-weight: bold;
        font-size: 22px;
        color: #222222;
    }
    .use-total-title {
        font-size: 14px;
        color: #6d6d6d;
    }
}
</style>
